<html>
<head>
<title>Dijit Theme Tester</title>

<!-- required: the themes's CSS -->
<link rel="stylesheet" href="../../dijit/themes/tundra/tundra.css" id="themeStyles">

<style type="text/css">
@import "../../dojo/resources/dojo.css";
@import "../tests/css/dijitTests.css";

html, body { height: 100%; width: 100%; padding: 0; border: 0; }
#main { height: 100%; width: 100%; padding: 5px; border: 0; }
/*#header, #mainSplit { margin: 10px; } */
#header { margin: 0px; }
#leftAccordion { width: 25%; }
#bottomTabs { height: 40%; }
#main .dijitSplitterH { height: 5px }
#main .dijitSplitterV { width: 5px }

/* pre-loader specific stuff to prevent unsightly flash of unstyled content */
#loader { 
padding:0;
margin:0;
position:absolute; 
top:0; left:0; 
width:100%; height:100%;  
background:#ededed; 
z-index:999;
vertical-align:middle; 
}
#loaderInner {
padding:5px;
position:relative; 
left:0;
top:0; 
width:175px; 
background:#3c3; 
color:#fff; 
}

hr.spacer { border:0; background-color:#ededed; width:80%; height:1px; } 

/* for custom menu buttons, do not appear to have any effect */
.myCustomTheme .dijitButtonNode {
border:1px solid #000;
vertical-align: middle;
padding: 0.2em 0.2em;
background: url("themeTesterImages/blackButtonEnabled.gif") repeat-x bottom left #474747;
color: blue;
}

.myCustomTheme .dijitButtonHover .dijitButtonNode,
.myCustomTheme .dijitToggleButtonHover .dijitButtonNode {
background: url("themeTesterImages/blackButtonHover.gif") repeat-x bottom left #3b3b3b !important;
}
</style>

<!-- for logging stray globals, not needed -->
<script type="text/javascript">
window.__globalList = {dojo: true, dijit: true, dojox: true, djConfig: true};
for(var i in window){
window.__globalList[i] = true;
}
</script>

<!-- required: dojo.js -->
<script type="text/javascript" src="../../dojo/dojo.js" 
djConfig="parseOnLoad: false, isDebug: true"></script>

<!-- not needed! used only for debugging / testing additional themes -->
<script type="text/javascript" src="../tests/_testCommon.js"></script>

<!-- 
<script type="text/javascript" src="http://prototypejs.org/assets/2007/10/16/prototype.js"></script>
-->
<script type="text/javascript" src="../dijit.js"></script>
<script type="text/javascript" src="../dijit-all.js" charset="utf-8"></script>

<script type="text/javascript"> // dojo.requires()

dojo.require("dijit.Menu");
dojo.require("dijit._Calendar");
dojo.require("dijit.ColorPalette");
dojo.require("dijit.ProgressBar");
dojo.require("dijit.TitlePane");
dojo.require("dijit.Tooltip");
dojo.require("dijit.Tree");

// editor:
dojo.require("dijit.Editor"); 
dojo.require("dijit._editor.plugins.FontChoice");
dojo.require("dijit._editor.plugins.LinkDialog");

// dnd:
dojo.require("dojo.dnd.Source");

// various Form elemetns
dojo.require("dijit.form.CheckBox");
dojo.require("dijit.form.Textarea");
dojo.require("dijit.form.SimpleTextarea");
dojo.require("dijit.form.FilteringSelect");
dojo.require("dijit.form.TextBox");
dojo.require("dijit.form.DateTextBox");
dojo.require("dijit.form.TimeTextBox");
dojo.require("dijit.form.CurrencyTextBox");
dojo.require("dijit.form.Button");
dojo.require("dijit.InlineEditBox");
dojo.require("dijit.form.NumberSpinner");
dojo.require("dijit.form.Slider"); 

// layouts used in page
dojo.require("dijit.layout.AccordionContainer");
dojo.require("dijit.layout.ContentPane");
dojo.require("dijit.layout.TabContainer");
dojo.require("dijit.layout.BorderContainer");
dojo.require("dijit.Dialog");

// scan page for widgets and instantiate them
dojo.require("dojo.parser");

// humm?
dojo.require("dojo.date.locale");

// for the Tree
dojo.require("dojo.data.ItemFileReadStore");

// for the colorpalette
function setColor(color){
var theSpan = dojo.byId("outputSpan");
dojo.style(theSpan,"color",color); 
theSpan.innerHTML = color;
}

// for the calendar
function myHandler(id,newValue){
console.debug("onChange for id = " + id + ", value: " + newValue);
}

dojo.addOnLoad(function() {

// this is just a list of 'official' dijit themes, you can use ?theme=String 
// for 'un-supported' themes, too. (eg: yours) 
var availableThemes = [
{ theme:"tundra", author:"Dojo", baseUri:"../themes/" },
{ theme:"soria", author:"nikolai", baseUri:"../themes/" },
//{ theme:"noir", author:"owen", baseUri:"../themes/"},
{ theme:"nihilo", author:"nikolai", baseUri:"../themes/" }
];

var holder = dojo.byId('themeData');
var tmpString='';
dojo.forEach(availableThemes,function(theme){
tmpString += '<a href="?theme='+theme.theme+'">'+theme.theme+'</'+'a> - by: '+theme.author+' <br>';
});
holder.innerHTML = tmpString;

var start = new Date().getTime();
dojo.parser.parse(dojo.byId('container')); 
console.info("Total parse time: " + (new Date().getTime() - start) + "ms");

dojo.byId('loaderInner').innerHTML += " done.";
setTimeout(function hideLoader(){
var loader = dojo.byId('loader'); 
dojo.fadeOut({ node: loader, duration:500,
onEnd: function(){ 
loader.style.display = "none"; 
}
}).play();
}, 250);

var strayGlobals = [];
for(var i in window){
if(!window.__globalList[i]){ strayGlobals.push(i); }
}
if(strayGlobals.length){
console.warn("Stray globals: "+strayGlobals.join(", "));
}
});


dojo.addOnLoad(function(){
dojo.byId("backgroundArea").innerHTML = dojo.date.locale.format(new Date(2005, 11, 30), { selector: 'date' });
var nineAm = new Date(0);
nineAm.setHours(9);
dojo.byId("timePicker").innerHTML = dojo.date.locale.format(nineAm, { selector: 'time' });
});

/***
dojo.addOnLoad(function(){
// use "before advice" to print log message each time resize is called on a layout widget
var origResize = dijit.layout._LayoutWidget.prototype.resize;
dijit.layout._LayoutWidget.prototype.resize = function(mb){
console.log(this + ": resize({w:"+ mb.w + ", h:" + mb.h + "})");
origResize.apply(this, arguments);
};

// content pane has no children so just use dojo's builtin after advice
dojo.connect(dijit.layout.ContentPane.prototype, "resize", function(mb){
console.log(this + ": resize({w:"+ mb.w + ", h:" + mb.h + "})");
});
});
***/
</script>
</head>
<body>
<!-- basic preloader: -->
<div id="loader"><div id="loaderInner">Loading themeTester ... </div></div>

<!-- data for tree and combobox -->
<div dojoType="dojo.data.ItemFileReadStore" jsId="continentStore"
url="../tests/_data/countries.json"></div>
<div dojoType="dojo.data.ItemFileReadStore" jsId="stateStore"
url="../tests/_data/states.json"></div>
<!-- contentMenu popup -->
<div dojoType="dijit.Menu" id="submenu1" contextMenuForWindow="true" style="display: none;">
<div dojoType="dijit.MenuItem" onClick="alert('Hello world');">Enabled Item</div>
<div dojoType="dijit.MenuItem" disabled="true">Disabled Item</div>
<div dojoType="dijit.MenuSeparator"></div>
<div dojoType="dijit.MenuItem" iconClass="dijitEditorIcon dijitEditorIconCut"
onClick="alert('not actually cutting anything, just a test!')">Cut</div>
<div dojoType="dijit.MenuItem" iconClass="dijitEditorIcon dijitEditorIconCopy"
onClick="alert('not actually copying anything, just a test!')">Copy</div>
<div dojoType="dijit.MenuItem" iconClass="dijitEditorIcon dijitEditorIconPaste"
onClick="alert('not actually pasting anything, just a test!')">Paste</div>
<div dojoType="dijit.MenuSeparator"></div>
<div dojoType="dijit.PopupMenuItem">
<span>Enabled Submenu</span>
<div dojoType="dijit.Menu" id="submenu2">
<div dojoType="dijit.MenuItem" onClick="alert('Submenu 1!')">Submenu Item One</div>
<div dojoType="dijit.MenuItem" onClick="alert('Submenu 2!')">Submenu Item Two</div>
<div dojoType="dijit.PopupMenuItem">
<span>Deeper Submenu</span>
<div dojoType="dijit.Menu" id="submenu4">
<div dojoType="dijit.MenuItem" onClick="alert('Sub-submenu 1!')">Sub-sub-menu Item One</div>
<div dojoType="dijit.MenuItem" onClick="alert('Sub-submenu 2!')">Sub-sub-menu Item Two</div>
</div>
</div>
</div>
</div>
<div dojoType="dijit.PopupMenuItem" disabled="true">
<span>Disabled Submenu</span>
<div dojoType="dijit.Menu" id="submenu3" style="display: none;">
<div dojoType="dijit.MenuItem" onClick="alert('Submenu 1!')">Submenu Item One</div>
<div dojoType="dijit.MenuItem" onClick="alert('Submenu 2!')">Submenu Item Two</div>
</div>
</div>
<div dojoType="dijit.PopupMenuItem">
<span>Different popup</span>
<div dojoType="dijit.ColorPalette"></div>
</div>
<div dojoType="dijit.PopupMenuItem">
<span>Different popup</span>
<div dojoType="dijit._Calendar"></div>
</div>
</div>
<!-- end contextMenu -->

<!-- "main" BorderContainer just contains page title and another BorderContainer -->
<div id="main" dojoType="dijit.layout.BorderContainer">

<h1 id="header" dojoType="dijit.layout.ContentPane" region="top" splitter="true">Dijit Theme Test Page</h1>

<!-- "mainSplit" BorderContainer has all the real content -->
<div dojoType="dijit.layout.BorderContainer" liveSplitters="false" design="sidebar"
region="center" id="mainSplit">

<div dojoType="dijit.layout.AccordionContainer"
minSize="20" style="width: 300px;" id="leftAccordion" region="leading" splitter="true">

<div dojoType="dijit.layout.AccordionPane" title="Popups and Alerts"><div style="padding:8px">
<h2>Tooltips</h2>
<ul>
<li>
<span id="ttRich"><b>rich</b> <i>text</i> tooltip</span>
<span dojoType="dijit.Tooltip" connectId="ttRich" style="display:none;">
Embedded <b>bold</b> <i>RICH</i> text <span style="color:#309; font-size:x-large;">weirdness!</span>
</span>
</li>

<li><a id="ttOne" href="#bogus">anchor tooltip</a>
<span dojoType="dijit.Tooltip" connectId="ttOne" style="display:none;">tooltip on anchor</span>
</li>
</ul>

<table style="width: 100%;">
<tr>
<td></td>
<td>
<div id="ttBelow" href="#bogus">tooltip below</div>
<div dojoType="dijit.Tooltip" connectId="ttBelow" style="display:none; width: 100px;" position="below" >I'm <i>below</i>!</div>
</td>
<td></td>
</tr>
<tr>
<td>
<div id="ttRight" href="#bogus">tooltip after</div>
<div dojoType="dijit.Tooltip" connectId="ttRight" style="display:none;" position="after" >I'm on the <i>right</i>!<br>(or left on RTL systems)</div>
</td>
<td></td>
<td>
<div id="ttLeft" href="#bogus">tooltip before</div>
<div dojoType="dijit.Tooltip" connectId="ttLeft" style="display:none;" position="before,after" >I'm on the <i>left</i>!<br>(or right on RTL systems)</div>
</td>
</tr>
<tr>
<td></td>
<td>
<div id="ttAbove" href="#bogus">tooltip above</div>
<div dojoType="dijit.Tooltip" connectId="ttAbove" style="display:none;" position="above" >I'm <i>above</i>!</div>
</td>
<td></td>
</tr>
</table>

<hr class="spacer">

<h2>Dialogs</h2>
<ul>
<li><a href="#" onclick="dijit.byId('dialog1').show()">show Modal Dialog</a></li>
</ul>

<div dojoType="dijit.form.DropDownButton">
<span>Show Tooltip Dialog</span>
<div dojoType="dijit.TooltipDialog" id="tooltipDlg" title="Enter Login information"
execute="alert('submitted w/args:\n' + dojo.toJson(arguments[0], true));">
<table>
<tr>
<td><label for="user">User:</label></td>
<td><input dojoType=dijit.form.TextBox type="text" id="user" name="user" ></td>
</tr>
<tr>
<td><label for="pwd">Password:</label></td>
<td><input dojoType=dijit.form.TextBox type="password" id="pwd" name="pwd"></td>
</tr>
<tr>
<td colspan="2" align="center">
<button dojoType=dijit.form.Button type="submit" name="submit">Login</button>
</tr>
</table>
</div>
</div> 
</div>
</div>

<div dojoType="dijit.layout.AccordionPane" title="Dojo Tree from Store">
<!-- tree widget -->
<div dojoType="dijit.Tree" store="continentStore" query="{type:'continent'}"
label="Continents">
</div>
</div>

<div dojoType="dijit.layout.AccordionPane" title="Calendar" selected="true">
<!-- calendar widget pane -->
<input id="calendar1" dojoType="dijit._Calendar" onChange="myHandler(this.id,arguments[0])">
</div>

<div dojoType="dijit.layout.AccordionPane" title="Color Picker">
<p>
Selecting a color will change the background color of the page.
Use this to test how tooltips and drop downs appear with different backgrounds.
</p>
<h2 class="testHeader">3x4</h2>
<script>
function setBackground(color){
dojo.query('.dijitAccordionBody').style('background', color);
dojo.query('.dijitTabPaneWrapper').style('background', color);
}
</script>
<div dojoType="dijit.ColorPalette"  palette="3x4" onChange="setBackground(arguments[0]);"></div>
<h2 class="testHeader">7x10</h2>
<div dojoType="dijit.ColorPalette" onChange="setBackground(arguments[0]);"></div>
</div>



</div><!-- end AccordionContainer -->

<!-- top tabs (marked as "center" to take up the main part of the BorderContainer) -->
<div dojoType="dijit.layout.TabContainer" region="center" id="topTabs">

<div id="basicFormTab" dojoType="dijit.layout.ContentPane" title="Basic Form Widgets" style="padding:10px;display:none;">

<h2>Buttons</h2>
<p>Buttons can do an action, display a menu, or both:</p>

Enabled:

<button dojoType="dijit.form.Button" iconClass="plusIcon" onClick='console.debug("clicked simple")'>
Simple
</button>

<button dojoType="dijit.form.DropDownButton" iconClass="noteIcon">
<span>Drop Down</span>
<div dojoType="dijit.Menu" id="editMenu1" style="display: none;">
<div dojoType="dijit.MenuItem"
iconClass="dijitEditorIcon dijitEditorIconCut"
onClick="console.debug('not actually cutting anything, just a test!')">
Cut
</div>

<div dojoType="dijit.MenuItem"
 iconClass="dijitEditorIcon dijitEditorIconCopy"
onClick="console.debug('not actually copying anything, just a test!')">
Copy
</div>

<div dojoType="dijit.MenuItem"
 iconClass="dijitEditorIcon dijitEditorIconPaste"
onClick="console.debug('not actually pasting anything, just a test!')">
Paste
</div>
</div>
</button>

<button dojoType="dijit.form.ComboButton" iconClass="noteIcon"
optionsTitle='save options'
onClick='console.debug("clicked combo save")'>
<span>Combo</span>
<div dojoType="dijit.Menu" id="saveMenu1" style="display: none;">
<div dojoType="dijit.MenuItem"
 iconClass="dijitEditorIcon dijitEditorIconSave"
onClick="console.debug('not actually saving anything, just a test!')">
Save
</div>
<div dojoType="dijit.MenuItem"
onClick="console.debug('not actually saving anything, just a test!')">
Save As
</div>
</div>
</button>

<button dojoType="dijit.form.ToggleButton" checked onChange="console.log('toggled button checked='+arguments[0]);" iconClass="dijitCheckBoxIcon">
Toggle
</button>

<hr class="spacer">

Disabled:

<button dojoType="dijit.form.Button" iconClass="plusIcon" disabled>
Simple
</button>

<button dojoType="dijit.form.DropDownButton" iconClass="noteIcon" disabled>
<span>Drop Down</span>
<div dojoType="dijit.Menu" id="editMenu2" style="display: none;">
<div dojoType="dijit.MenuItem"
iconClass="dijitEditorIcon dijitEditorIconCut"
onClick="console.debug('not actually cutting anything, just a test!')">
Cut
</div>

<div dojoType="dijit.MenuItem"
 iconClass="dijitEditorIcon dijitEditorIconCopy"
onClick="console.debug('not actually copying anything, just a test!')">
Copy
</div>

<div dojoType="dijit.MenuItem"
 iconClass="dijitEditorIcon dijitEditorIconPaste"
onClick="console.debug('not actually pasting anything, just a test!')">
Paste
</div>
</div>
</button>

<button dojoType="dijit.form.ComboButton" iconClass="noteIcon"
optionsTitle='save options'
disabled>
<span>Combo</span>
<div dojoType="dijit.Menu" id="saveMenu2" style="display: none;">
<div dojoType="dijit.MenuItem"
 iconClass="dijitEditorIcon dijitEditorIconSave"
onClick="console.debug('not actually saving anything, just a test!')">
Save
</div>
<div dojoType="dijit.MenuItem"
onClick="console.debug('not actually saving anything, just a test!')">
Save As
</div>
</div>
</button>

<button dojoType="dijit.form.ToggleButton" checked disabled iconClass="dijitCheckBoxIcon">
Toggle
</button>

<hr class="spacer">

<h2>CheckBox</h2>
<fieldset>
<input id="check1" type="checkBox" dojoType="dijit.form.CheckBox">
<label for="check1">unchecked</label>

<input id="check2" type="checkBox" dojoType="dijit.form.CheckBox" checked="checked">
<label for="check2">checked</label>

<input id="check3" type="checkBox" dojoType="dijit.form.CheckBox" disabled>
<label for="check3">disabled</label>

<input id="check4" type="checkBox" dojoType="dijit.form.CheckBox" checked="checked" disabled>
<label for="check4">disabled and checked</label>
</fieldset>

<h2>Radio Buttons</h2>
<fieldset>
<input type="radio" name="g1" id="g1rb1" value="news" dojoType="dijit.form.RadioButton">
<label for="g1rb1">news</label>
<input type="radio" name="g1" id="g1rb2" value="talk" dojoType="dijit.form.RadioButton" checked>
<label for="g1rb2">talk</label>
<input type="radio" name="g1" id="g1rb3" value="weather" dojoType="dijit.form.RadioButton" disabled>
<label for="g1rb3">weather (disabled)</label>
</fieldset>
</div> <!-- end of basic form widgets -->

<div id="textboxTab" dojoType="dijit.layout.ContentPane" title="Text Input Widgets" style="padding:10px;display:none;">

<h2>dijit.form.DateTextBox</h2>
<label for="date1">Enabled:</label>
<input id="date1" name="date1" type="text" dojoType="dijit.form.DateTextBox" value="2008-12-25">
<label for="date2">Disabled:</label>
<input id="date2" name="date2" type="text" dojoType="dijit.form.DateTextBox" value="2008-12-25" disabled>

<h2>dijit.form.TimeTextBox</h2>
<label for="time1">Enabled:</label>
<input id="time1" name="time1" type="text" dojoType="dijit.form.TimeTextBox" value="T17:45:00">
<label for="time2">Disabled:</label>
<input id="time2" name="time2" type="text" dojoType="dijit.form.TimeTextBox" value="T17:45:00" disabled>

<h2>dijit.form.CurrencyTextBox</h2>
<label for="currency1">Enabled:</label>
<input id="currency1" type="text" name="income1" value="54775.53"
dojoType="dijit.form.CurrencyTextBox"
required="true"
constraints="{fractional:true}"
currency="USD"
invalidMessage="Invalid amount.  Include dollar sign, commas, and cents.  Cents are mandatory.">
<label for="currency2">Disabled:</label>
<input id="currency2" type="text" name="income1" value="54775.53"
dojoType="dijit.form.CurrencyTextBox"
required="true"
constraints="{fractional:true}"
currency="USD"
invalidMessage="Invalid amount.  Include dollar sign, commas, and cents.  Cents are mandatory." disabled>

<h2>dijit.form.ComboBox</h2>
<label for="datatestComboBox">Enabled: </label>
<input dojoType="dijit.form.ComboBox"
value="California"
store="stateStore"
searchAttr="name"
name="state2"
id="datatestComboBox"
>
<label for="datatestComboBox2">Disabled: </label>
<input dojoType="dijit.form.ComboBox"
value="California"
store="stateStore"
searchAttr="name"
name="state2"
id="datatestComboBox2"
disabled
>

<hr class="spacer">

<h2>dijit.form.NumberSpinner max=100</h2>
<label for="spinner1">Enabled: </label>
<input dojoType="dijit.form.NumberSpinner" constraints="{max:100,places:0}" id="spinner1" value="10">
<label for="spinner">Disabled: </label>
<input dojoType="dijit.form.NumberSpinner" constraints="{max:100,places:0}" id="spinner2" value="10" disabled>

</div>

<div id="textareaTab" dojoType="dijit.layout.ContentPane" title="TextArea/Editor" style="padding:10px;">

<h2>dijit.form.Textarea</h2>
<p>Enabled:</p>
<textarea dojoType="dijit.form.Textarea" name="areText">This text area will expand and contract as you type text.

Lorem ipsum dolor sit amet,
consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci
tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</textarea>

<br>
<p>Disabled:</p>
<textarea dojoType="dijit.form.Textarea" name="areText2" disabled>This text
area is disabled and you shouldn't be able to type in it.
</textarea>


<h2>dijit.form.SimpleTextarea</h2>
<p></p>
<p>Enabled:</p>
<textarea dojoType="dijit.form.SimpleTextarea" name="areText">This text area has a constant height and displays a scrollbar when necessary.

Lorem ipsum dolor sit amet,
consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci
tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis
autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat,
vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio
dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait
nulla facilisi.
</textarea>

<p>Disabled:</p>
<textarea dojoType="dijit.form.SimpleTextarea" name="areText2" disabled>Lorem ipsum dolor sit amet,
consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci
tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis
autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat,
vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio
dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait
nulla facilisi.
</textarea>

<h2>dijit.Editor</h2>
<p>Enabled:</p>
<!-- FIXME:
set height on this node to size the whole editor, but causes the tab to not scroll
until you select another tab and come back. alternative is no height: here, but that
causes editor to become VERY tall, and size to a normal height when selected (like the
dijit.form.TextArea in "Form Feel" Tab), but in reverse. refs #3980 and is maybe new bug?
-->
<div style="border:1px solid #ededed;">
<textarea height="175" dojoType="dijit.Editor" extraPlugins="['|', 'createLink', 'fontName']" styleSheets="../../dojo/resources/dojo.css" style="width:400px; height:175px; overflow:auto; ">
<ul>
<li>Lorem <a href="http://dojotoolkit.org">and a link</a>, what do you think?</li>
<li>This is the Editor with a Toolbar attached.</li>
</ul>
</textarea>
</div>
<p>Disabled:</p>
<div style="border:1px solid #ededed;">
<textarea height="175" dojoType="dijit.Editor" extraPlugins="['|', 'createLink', 'fontName']" styleSheets="../../dojo/resources/dojo.css"
style="width:400px; height:175px; overflow:auto; " disabled="true">
<ul>
<li>Lorem <a href="http://dojotoolkit.org">and a link</a>, what do you think?</li>
<li>This is the Editor with a Toolbar attached.</li>
</ul>
</textarea>
</div>
</div><!-- end of Textarea/Editor tab -->


<div dojoType="dijit.layout.ContentPane" title="Sliders" style="padding:10px;display:none;">


<!-- Sliders: -->

<h2>Enabled</h2>
<div style="float:right;">
<div dojoType="dijit.form.VerticalSlider" name="vertical1"
onChange="dojo.byId('slider2input').value=arguments[0];"
value="10"
maximum="100"
minimum="0"
discreteValues="11"
style="height:175px; clear:both"
id="slider2">
<ol dojoType="dijit.form.VerticalRuleLabels" container="leftDecoration"style="width:2em;" labelStyle="right:0px;">
<li>0
<li>100
</ol>

<div dojoType="dijit.form.VerticalRule" container="leftDecoration" count=11 style="width:5px;"></div>
<div dojoType="dijit.form.VerticalRule" container="rightDecoration" count=11 style="width:5px;"></div>
<ol dojoType="dijit.form.VerticalRuleLabels" container="rightDecoration"style="width:2em;" maximum="100" count="6" numericMargin="1" constraints="{pattern:'#'}"></ol>
</div>
<br> Slider2 Value:<input readonly id="slider2input" size="3" value="10">
</div>

<div dojoType="dijit.form.HorizontalSlider" name="horizontal1"
onChange="dojo.byId('slider1input').value=dojo.number.format(arguments[0]/100,{places:1,pattern:'#%'});"
value="10"
maximum="100"
minimum="0"
showButtons="false"
intermediateChanges="true"
style="width:50%; height: 20px;"
id="horizontal1">
<ol dojoType="dijit.form.HorizontalRuleLabels" container="topDecoration" style="height:1.2em;font-size:75%;" numericMargin="1" count="6"></ol>
<div dojoType="dijit.form.HorizontalRule" container="topDecoration" count=11 style="height:5px;"></div>
<div dojoType="dijit.form.HorizontalRule" container="bottomDecoration" count=5 style="height:5px;"></div>
<ol dojoType="dijit.form.HorizontalRuleLabels" container="bottomDecoration" style="height:1em;font-size:75%;">
<li>lowest
<li>normal
<li>highest
</ol>

</div>
<br>Value: <input readonly id="slider1input" size="5" value="10.0%">

<div dojoType="dijit.form.HorizontalSlider" name="horizontal2"
minimum="1"
value="2"
maximum="3"
discreteValues="3"
showButtons="false"
intermediateChanges="true"
style="width:300px; height: 40px;"
id="horizontal2">
<div dojoType="dijit.form.HorizontalRule" container="bottomDecoration" count=3 style="height:5px;"></div>
<ol dojoType="dijit.form.HorizontalRuleLabels" container="bottomDecoration"style="height:1em;font-size:75%;">
<li><img width=10 height=10 src="../tests/images/note.gif"><br><span style="font-size: small">small</span>
<li><img width=15 height=15 src="../tests/images/note.gif"><br><span style="font-size: medium">medium</span>

<li><img width=20 height=20 src="../tests/images/note.gif"><br><span style="font-size: large">large</span>
</ol>
</div>

<h2 style="clear:both">Disabled</h2>
<div style="float:right;">
<div dojoType="dijit.form.VerticalSlider" name="vertical1"
value="10"
maximum="100"
minimum="0"
discreteValues="11"
style="height:175px; clear:both"
disabled>
<ol dojoType="dijit.form.VerticalRuleLabels" container="leftDecoration"style="width:2em;" labelStyle="right:0px;">
<li>0
<li>100
</ol>

<div dojoType="dijit.form.VerticalRule" container="leftDecoration" count=11 style="width:5px;"></div>
<div dojoType="dijit.form.VerticalRule" container="rightDecoration" count=11 style="width:5px;"></div>
<ol dojoType="dijit.form.VerticalRuleLabels" container="rightDecoration"style="width:2em;" maximum="100" count="6" numericMargin="1" constraints="{pattern:'#'}"></ol>
</div>
</div>
<div dojoType="dijit.form.HorizontalSlider" name="horizontal1"
value="10"
maximum="100"
minimum="0"
showButtons="false"
intermediateChanges="true"
style="width:50%; height: 20px;"
disabled>
<ol dojoType="dijit.form.HorizontalRuleLabels" container="topDecoration" style="height:1.2em;font-size:75%;" numericMargin="1" count="6"></ol>
<div dojoType="dijit.form.HorizontalRule" container="topDecoration" count=11 style="height:5px;"></div>
<div dojoType="dijit.form.HorizontalRule" container="bottomDecoration" count=5 style="height:5px;"></div>
<ol dojoType="dijit.form.HorizontalRuleLabels" container="bottomDecoration" style="height:1em;font-size:75%;">
<li>lowest
<li>normal
<li>highest
</ol>

</div>

<div dojoType="dijit.form.HorizontalSlider" name="horizontal2"
minimum="1"
value="2"
maximum="3"
discreteValues="3"
showButtons="false"
intermediateChanges="true"
style="width:300px; height: 40px;"
disabled>
<div dojoType="dijit.form.HorizontalRule" container="bottomDecoration" count=3 style="height:5px;"></div>
<ol dojoType="dijit.form.HorizontalRuleLabels" container="bottomDecoration"style="height:1em;font-size:75%;">
<li><img width=10 height=10 src="../tests/images/note.gif"><br><span style="font-size: small">small</span>
<li><img width=15 height=15 src="../tests/images/note.gif"><br><span style="font-size: medium">medium</span>

<li><img width=20 height=20 src="../tests/images/note.gif"><br><span style="font-size: large">large</span>
</ol>
</div>

</form>

</div>

<div id="variousTab" dojoType="dijit.layout.ContentPane" title="Various Dijits"
style="padding:10px; display:none;">


<h2>TitlePane</h2>
<div dojoType="dijit.TitlePane" title="my pane" width="275">
<p>This is a title pane.  It can be expanded and collapsed.</p>

<p>Sed sollicitudin suscipit risus. Nam
ullamcorper. Sed nisl lectus, pellentesque nec,
malesuada eget, ornare a, libero. Lorem ipsum dolor
sit amet, consectetuer adipiscing elit.</p>

</div><!-- end title pane -->

<hr class="spacer">

<h2>ProgressBar</h2>
<div style="width:400px;" maximum="200" id="setTestBar"
progress="20" dojoType="dijit.ProgressBar"></div>

Indeterminate:
<div style="width:400px;" indeterminate="true" dojoType="dijit.ProgressBar"></div>

</div><!-- end:various dijits upper tab -->

<div id="InlineEditBoxTab" dojoType="dijit.layout.ContentPane" title="InlineEditBox"><!-- TODO: out of synch? missing style= -->

<h2 class="testTitle">dijit.InlineEditBox + dijit.form.TextBox on &lt;h3&gt;</h2>

(HTML before)
<h3 id="editable" style="font-size:larger;" dojoType="dijit.InlineEditBox" onChange="myHandler(this.id,arguments[0])">
Edit me - I trigger the onChange callback
</h3>
(HTML after)

<hr class="spacer">

<h2>dijit.InlineEditBox + dijit.form.Textarea</h2>

(HTML before)
<p id="areaEditable" dojoType="dijit.InlineEditBox" editor="dijit.form.Textarea" autoSave="false">
I'm one big paragraph.  Go ahead and edit me.  I dare you.
The quick brown fox jumped over the lazy dog.  Blah blah blah blah blah blah blah ...
</p>
(HTML after)

<p>
These links will
<a href="#" onClick="dijit.byId('areaEditable').attr('disabled', true)">disable</a> /
<a href="#" onClick="dijit.byId('areaEditable').attr('disabled', false)">enable</a>
the text area above.
</p>

<hr class="spacer">

<h2>dijit.form.DateTextBox</h2>

(HTML inline before)
<span id="backgroundArea" dojoType="dijit.InlineEditBox" editor="dijit.form.DateTextBox" width="170px"></span>
(HTML after)

<hr class="spacer">

<h2>dijit.form.TimeTextBox</h2>

(HTML inline before)
<span id="timePicker" dojoType="dijit.InlineEditBox" editor="dijit.form.TimeTextBox" width="150px"></span>
(HTML after)

<hr class="spacer">


<h2>dijit.form.FilteringSelect + Inline + remote data store</h2>
(HTML inline before)
<span id="backgroundArea2" dojoType="dijit.InlineEditBox" editor="dijit.form.FilteringSelect"
editorParams="{store: stateStore, autoComplete: true, promptMessage: 'Please enter a state'}"
width="300px">
Indiana
</span>
(HTML after)

</div><!-- end InlineEditBox tab -->

<div id="dndTab" dojoType="dijit.layout.ContentPane" title="DnD"
style="padding:10px; display:none;  ">
<div style="float:left; margin:5px; ">
<h3>Source 1</h3>
<div dojoType="dojo.dnd.Source" style="border:3px solid #ccc; padding: 1em 3em; ">
<div class="dojoDndItem">Item <strong>X</strong></div>
<div class="dojoDndItem">Item <strong>Y</strong></div>
<div class="dojoDndItem">Item <strong>Z</strong></div>
</div>
</div>
<div style="float:left; margin:5px; ">
<h3>Source 2</h3>
<div dojoType="dojo.dnd.Source" style="border:3px solid #ccc; padding: 1em 3em; ">
<div class="dojoDndItem">Item <strong>1</strong></div>
<div class="dojoDndItem">Item <strong>2</strong></div>
<div class="dojoDndItem">Item <strong>3</strong></div>
</div>
</div>
</div><!-- end DnD tab -->

<div id="closableTab" dojoType="dijit.layout.ContentPane" title="Closable"
style="display:none; padding:10px; " closable="true">
This pane is closable, just for the icon ...
</div>
</div><!-- end of region="center" TabContainer -->

<!-- bottom right tabs -->
<div dojoType="dijit.layout.TabContainer" id="bottomTabs" tabPosition="bottom" selectedChild="btab1" region="bottom" splitter="true">

<!-- btab 1 -->
<div id="btab1" dojoType="dijit.layout.ContentPane" title="Info" style=" padding:10px; ">
<p>You can explore this single page after applying a Theme
for use in creation of your own theme.</p>

<p>I am whole slew of Widgets on a page. Jump to <a href="../tests/">dijit tests</a> to
test individual components.</p>

<p>There is a right-click [context] pop-up menu here, as well.</p>
</div><!-- end:info btab1 -->

<div id="btab2" dojoType="dijit.layout.ContentPane" title="Alternate Themes" style="padding:20px;">
<span id="themeData"></span>
</div><!-- btab2 -->

<div id="btab3" dojoType="dijit.layout.ContentPane" title="Bottom 3" closable="true">
<p>I am the last Tab</p>
<div id="dialog2" dojoType="dijit.Dialog" title="Encased Dialog" style="display:none;">
I am the second dialog. I am
parented by the Low Tab Pane #3
</div>
</div><!-- btab3 -->

</div><!-- end Bottom TabContainer -->

</div> <!-- end of "mainSplit" BorderContainer -->
</div><!-- end of "main" BorderContainer -->

<!-- dialog in body -->
<div id="dialog1" dojoType="dijit.Dialog" title="Floating Modal Dialog" style="display:none;" href="../tests/layout/doc0.html"></div>

</body>
</html>
